<template>
  <div class="content">
    <div class="phone-pc-download">
      <div class="margin-auto">
        <div class="pc">
          <div class="title">在电脑上听</div>
          <div class="coverImg">
            <img :src="require('@assets/img/pc-download-img.png')" alt="" />
          </div>
          <div class="info">
            <span class="iconfont font-icon">&#xe689;</span>
            <span class="margin-left-10">macOS</span>
            <span class="margin-left iconfont font-icon">&#xe73e;</span>
            <span class="margin-left-10">Windows</span>
          </div>
          <div class="download-button">
            <button @click="pcDownload">下载电脑端</button>
          </div>
        </div>
        <div class="phone">
          <div class="title">在手机上听</div>
          <div class="coverImg">
            <img :src="require('@assets/img/phone-download-img.png')" alt="" />
          </div>
          <div class="info">
            <span class="iconfont font-icon">&#xe601;</span>
            <span class="margin-left-10">iPhone</span>
            <span class="margin-left iconfont font-icon">&#xe632;</span>
            <span class="margin-left-10">Android</span>
          </div>
          <div class="download-button">
            <tian-animation>
              <div
                slot
                id="button-qrcode"
                v-if="isQrcode"
                class="qrcode button-qrcode"
              >
                <div id="button-qrcode" class="img">
                  <img
                    id="button-qrcode"
                    :src="require('@assets/img/download-qrcode.png')"
                    alt=""
                  />
                </div>
                <p id="button-qrcode" class="text">扫描二维码下载</p>
              </div>
            </tian-animation>
            <button id="android-button">
              <span id="android-button" class="iconfont font-icon"
                >&#xe690;</span
              >
              <span id="android-button">下载手机端</span>
            </button>
          </div>
        </div>
      </div>
    </div>
    <!-- 白色盒子 灰色盒子 -->
    <div
      class="white-box"
      :class="index % 2 !== 0 ? 'color-box' : ''"
      v-for="(item, index) in downloadList"
      :key="item.title"
    >
      <div class="margin-auto" v-if="index % 2 == 0">
        <div class="info">
          <h3>{{ item.title }}</h3>
          <p v-html="item.info1"></p>
          <p v-html="item.info2"></p>
        </div>
        <div class="img">
          <img :src="item.img" alt="" />
        </div>
      </div>

      <div class="margin-auto" v-else>
        <div class="img">
          <img :src="item.img" alt="" />
        </div>
        <div class="info">
          <h3>{{ item.title }}</h3>
          <p v-html="item.info1"></p>
          <p v-html="item.info2"></p>
        </div>
      </div>
    </div>
    <!-- qrcode -->
    <div class="qrcode fixed">
      <div class="img">
        <img :src="require('@assets/img/download-qrcode.png')" alt="" />
      </div>
      <p class="text">扫描二维码下载</p>
    </div>
  </div>
</template>

<script>
import downloadList1 from "@assets/img/download-list-1.jpg";
import downloadList2 from "@assets/img/download-list-2.jpg";
import downloadList3 from "@assets/img/download-list-3.jpg";
import downloadList4 from "@assets/img/download-list-4.jpg";
import downloadList5 from "@assets/img/download-list-5.jpg";
export default {
  name: "download",
  data() {
    return {
      isQrcode: false,
      downloadList: [
        {
          title: "千万曲库 首首CD音质",
          info1: "囊括百万无损SQ音乐，你在用手机听歌时，",
          info2: "也能感受到纤毫毕现的CD音质，更能免费离线收听",
          img: downloadList1,
        },
        {
          title: "千位明星 亲自推荐音乐",
          info1:
            "韩红，戴佩妮等<i class='color-red'>千位明星已入驻</i>，亲自创建私房歌单，录制独",
          info2: "家DJ节目，推荐他们心中的好音乐",
          img: downloadList2,
        },
        {
          title: "社交关系 发现全新音乐",
          info1:
            "你可以<i class='color-red'>关注明星</i>、DJ和好友，通过浏览他们的动态、收藏和",
          info2: "分享，发现更多全新好音乐",
          img: downloadList3,
        },
        {
          title: "手机电脑 歌单实时同步",
          info1: "只要一个帐号，你就可以同步在手机、电脑上创建、收藏",
          info2: "的歌单，<i class='color-red'>随时随地畅享好音乐</i>",
          img: downloadList4,
        },
        {
          title: "听歌识曲 助你疯狂猜歌",
          info1: "歌曲很动听却不知道歌名，歌名在嘴边却想不起来……",
          info2: "用<i class='color-red'>听歌识曲</i>功能，几秒钟就知道歌名",
          img: downloadList5,
        },
      ],
    };
  },
  created() {
    window.addEventListener("click", this.selfClcik);
  },
  methods: {
    selfClcik(e) {
      e.stopPropation
        ? e.stopPropagation()
        : (window.event.cancelBubble = true);
      if (e.target.id == "android-button") {
        this.isQrcode = !this.isQrcode;
        return;
      }
      if (e.target.id !== "button-qrcode") {
        this.isQrcode = false;
      }
    },
    pcDownload(){
      window.open("https://music.163.com/stat/?web=pc&from=download&t=1601284893404&redirect=https%3A%2F%2Fmusic.163.com%2Fapi%2Fpc%2Fdownload%2Flatest")
    }
  },
  beforeDestroy() {
    window.removeEventListener("click", this.selfClcik);
  },
};
</script>

<style lang="scss" scoped>
.button-qrcode.button-qrcode {
  &::after {
    content: "";
    position: absolute;
    bottom: -20px;
    border: 10px solid #fff;
    border-right-color: rgba(0, 0, 0, 0);
    border-left-color: rgba(0, 0, 0, 0);
    border-bottom-color: rgba(0, 0, 0, 0);
  }
  width: 200px;
  height: 220px;
  position: absolute;
  bottom: 85px;
  left: 0;
  right: 0;
  margin: auto;
  .img {
    margin-top: 10px;
    width: 160px;
    height: 160px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .text {
    font-size: 14px;
  }
}
.fixed {
  position: fixed;
  right: 25px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.qrcode {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 10;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  background-color: #fff;
  border-radius: 10px;
  width: 140px;
  height: 160px;
  .img {
    margin-top: 10px;
    width: 100px;
    height: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .text {
    margin-top: 10px;
    color: #333;
    font-size: 12px;
    text-align: center;
  }
}
::v-deep .color-red {
  color: #c00;
}
.color-box {
  background-color: #f8f8f8 !important;
}
.white-box {
  height: 400px;
  background-color: #fff;
  border-bottom: 1px solid #e3e3e3;

  .margin-auto {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .info {
    h3 {
      font-size: 40px;
    }
    p {
      font-size: 16px;
      color: #666;
      line-height: 24px;
    }
  }
}
.content {
  margin-top: 5px;
}
.margin-auto {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.phone-pc-download {
  height: 600px;
  background-image: url(../../assets/img/download-pc-phone-bg.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  align-items: center;
}
.phone {
  margin-left: 40px;
}
.pc,
.phone {
  .title {
    margin-bottom: 33px;
    width: 100%;
    text-align: center;
    font-size: 22px;
    opacity: 0.8;
    color: #ffffff;
  }
  .coverImg {
    display: flex;
    justify-content: center;
    img {
      height: 250px;
    }
  }
  .info {
    width: 100%;
    margin: 26px auto;
    font-size: 16px;
    color: #eee;
    text-align: center;
    .font-icon {
      font-size: 20px;
      color: rgb(76, 76, 76);
    }
    .margin-left-10 {
      margin-left: 10px;
    }
    .margin-left {
      margin-left: 30px;
    }
  }
  .download-button {
    position: relative;
    button {
      font-size: 22px;
      color: #d10000;
      cursor: pointer;
      border-radius: 65px;
      width: 300px;
      height: 65px;
      margin: 0 auto;
      display: block;
      border: 0;
      background-color: #fff;
      span {
        vertical-align: middle;
      }
    }
    .font-icon {
      color: #d10000;
      font-size: 26px;
      font-weight: 550;
    }
    button:hover {
      background-color: rgb(187, 187, 187);
    }
  }
}
</style>